<template>
  <div class="simple-home-container">
    <!-- 主内容区 - 只有地图 -->
    <div id="mapView" class="map-container"></div>

    <!-- 图层说明提示 -->
    <div class="layer-info-tip">
      <div class="tip-title">图层说明</div>
      <div class="tip-content">
        <div class="tip-item">
          <span class="color-box highway-good"></span> 高速公路 - 良好
        </div>
        <div class="tip-item">
          <span class="color-box highway-normal"></span> 高速公路 - 一般
        </div>
        <div class="tip-item">
          <span class="color-box highway-bad"></span> 高速公路 - 较差
        </div>
        <div class="tip-item">
          <span class="color-box highway-repair"></span> 高速公路 - 维修中
        </div>
        <div class="tip-item">
          <span class="color-box entrance"></span> 进出口
        </div>
        <div class="tip-item">
          <span class="color-box service"></span> 服务区
        </div>
        <div class="tip-item">
          <span class="color-box accident"></span> 事故点
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 简化版首页概览页面 - 只显示地图
import { onMounted, onUnmounted, ref } from 'vue'
import Map from '@arcgis/core/Map.js'
import MapView from '@arcgis/core/views/MapView.js'
import FeatureLayer from '@arcgis/core/layers/FeatureLayer.js'
import SimpleMarkerSymbol from '@arcgis/core/symbols/SimpleMarkerSymbol.js'
import Legend from '@arcgis/core/widgets/Legend.js'
import gaodeLayer from '../utils/GaoDeBaseLayer'

// 地图相关变量
let view: MapView | null = null
let highwayLayer: FeatureLayer | null = null
let entranceLayer: FeatureLayer | null = null
let serviceLayer: FeatureLayer | null = null
let accidentLayer: FeatureLayer | null = null

// 初始化地图
const initMap = async () => {
  try {
    // 创建进出口图层
    entranceLayer = new FeatureLayer({
      url: 'https://services.arcgis.com/pPin4rPIRy9xhFS0/arcgis/rest/services/HighwayService/FeatureServer/0',
      outFields: ['*'],
      popupEnabled: true,
      popupTemplate: {
        title: '{entrance_name}',
        content: [
          {
            type: 'fields',
            fieldInfos: [
              { fieldName: 'entrance_id', label: '进出口编号' },
              { fieldName: 'entrance_type', label: '进出口类型' },
              { fieldName: 'highway_code', label: '所属高速公路' },
              { fieldName: 'status', label: '收费站状态' },
              { fieldName: 'location_desc', label: '位置描述' }
            ]
          }
        ]
      },
      // 设置进出口图层的样式
      renderer: {
        type: 'simple',
        symbol: new SimpleMarkerSymbol({
          style: 'square',  // 使用方形标记
          color: '#3498DB',  // 蓝色
          size: 10,
          outline: {
            color: '#2980B9',
            width: 1
          }
        }),
        label: '高速公路进出口'
      }
    })

    // 创建服务区图层
    serviceLayer = new FeatureLayer({
      url: 'https://services.arcgis.com/pPin4rPIRy9xhFS0/arcgis/rest/services/HighwayServiceLayer/FeatureServer/0',
      outFields: ['*'],
      popupEnabled: true,
      popupTemplate: {
        title: '{service_name}',
        content: [
          {
            type: 'fields',
            fieldInfos: [
              { fieldName: 'service_id', label: '服务区编号' },
              { fieldName: 'highway_code', label: '所属高速公路' },
              { fieldName: 'service_level', label: '服务区等级' },
              { fieldName: 'status', label: '服务区状态' },
              { fieldName: 'facilities', label: '设施描述' }
            ]
          }
        ]
      },
      // 设置服务区图层的样式
      renderer: {
        type: 'simple',
        symbol: new SimpleMarkerSymbol({
          style: 'diamond',  // 使用菱形标记
          color: '#27AE60',  // 绿色
          size: 12,
          outline: {
            color: '#1E8449',
            width: 1
          }
        }),
        label: '高速公路服务区'
      }
    })

    // 创建地图
    const map = new Map({
      basemap: {
        baseLayers: [gaodeLayer],
      },
      layers: [entranceLayer, serviceLayer],
    })

    // 创建地图视图
    view = new MapView({
      container: 'mapView',
      map: map,
      center: [116.404, 39.915], // 北京中心点坐标
      zoom: 10,
    })

    // 创建高速公路图层
    highwayLayer = new FeatureLayer({
      url: 'https://services.arcgis.com/pPin4rPIRy9xhFS0/arcgis/rest/services/HighwayManagemnetSystem/FeatureServer/0',
      outFields: ['*'],
      popupEnabled: true,
      popupTemplate: {
        title: '{highway_name}',
        content: [
          {
            type: 'fields',
            fieldInfos: [
              { fieldName: 'highway_code', label: '高速公路编号' },
              { fieldName: 'highway_level', label: '高速公路等级' },
              { fieldName: 'lanes', label: '车道数' },
              { fieldName: 'status', label: '路况状态' },
              { fieldName: 'speed_limit', label: '限速(km/h)' }
            ]
          }
        ]
      },
      // 根据status字段设置唯一值渲染
      renderer: {
        type: 'unique-value',
        field: 'status',
        uniqueValueInfos: [
          {
            value: '良好',
            symbol: {
              type: 'simple-line',
              color: '#67C23A',
              width: '3px',
            },
          },
          {
            value: '一般',
            symbol: {
              type: 'simple-line',
              color: '#E6A23C',
              width: '3px',
            },
          },
          {
            value: '较差',
            symbol: {
              type: 'simple-line',
              color: '#F56C6C',
              width: '3px',
            },
          },
          {
            value: '维修中',
            symbol: {
              type: 'simple-line',
              color: '#EE1414',
              width: '3px',
            },
          },
        ],
      },
    })

    // 创建事故点图层
    accidentLayer = new FeatureLayer({
      url: 'https://services.arcgis.com/pPin4rPIRy9xhFS0/arcgis/rest/services/HighwayManagemnetSystem/FeatureServer/1',
      outFields: ['*'],
      popupEnabled: true,
      popupTemplate: {
        title: '事故点信息',
        content: [
          {
            type: 'fields',
            fieldInfos: [
              { fieldName: 'accident_type', label: '事故类型' },
              { fieldName: 'severity', label: '严重程度' },
              { fieldName: 'date_time', label: '发生时间' },
              { fieldName: 'highway_code', label: '所属高速公路' },
              { fieldName: 'location_desc', label: '位置描述' },
              { fieldName: 'status', label: '处理状态' },
              { fieldName: 'HandleMessage', label: '处理信息' }
            ]
          }
        ]
      },
      // 设置事故点图层的样式
      renderer: {
        type: 'simple',
        symbol: new SimpleMarkerSymbol({
          style: 'triangle',  // 使用三角形标记
          color: '#E74C3C',  // 红色
          size: 12,
          outline: {
            color: '#C0392B',
            width: 1
          }
        }),
        label: '高速公路事故点'
      }
    })

    // 添加图层到地图
    map.add(highwayLayer)
    map.add(accidentLayer)

    // 添加图例
    const legend = new Legend({
      view: view,
      layerInfos: [
        {
          layer: highwayLayer,
          title: '高速公路'
        },
        {
          layer: entranceLayer,
          title: '进出口'
        },
        {
          layer: serviceLayer,
          title: '服务区'
        },
        {
          layer: accidentLayer,
          title: '事故点'
        }
      ]
    })

    // 将图例添加到右下角
    view.ui.add(legend, 'bottom-right')
  } catch (error) {
    console.error('初始化地图失败:', error)
  }
}

onMounted(() => {
  initMap()
})

onUnmounted(() => {
  if (view) {
    view = null
  }
})
</script>

<style scoped>
.simple-home-container {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.map-container {
  height: 100%;
  width: 100%;
}

/* 图层说明提示样式 */
.layer-info-tip {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  padding: 12px;
  z-index: 100;
  max-width: 200px;
  font-size: 12px;
}

.tip-title {
  font-weight: bold;
  margin-bottom: 8px;
  text-align: center;
  border-bottom: 1px solid #ddd;
  padding-bottom: 4px;
}

.tip-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tip-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.color-box {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  display: inline-block;
}

/* 高速公路状态颜色 */
.highway-good {
  background-color: #67C23A;
}

.highway-normal {
  background-color: #E6A23C;
}

.highway-bad {
  background-color: #F56C6C;
}

.highway-repair {
  background-color: #EE1414;
}

/* 点图层颜色 */
.entrance {
  background-color: #3498DB;
}

.service {
  background-color: #27AE60;
}

.accident {
  background-color: #E74C3C;
}
</style>
